<template>
    <div class="th-container">
        <!-- <a-table :row-selection="rowSelection" :columns="columns" :data-source="data"> -->
        <a-table :columns="columns" :data-source="data">
            <span slot="action" slot-scope="text, record">
                <a-popconfirm title="确定删除此记录?" placement="bottomRight" ok-text="Yes" cancel-text="No"
                    @confirm="handleDelOne(text, record)">
                    <a-icon type="delete" class="delete-icon" />
                </a-popconfirm>
            </span>
        </a-table>
    </div>
</template>

<script>
import moment from 'moment';

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        align: 'center',

    },
    {
        title: '名称',
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '倒计时间',
        dataIndex: 'settingTime',
        align: 'center',
    },
    {
        title: '保存时间',
        dataIndex: 'saveTime',
        align: 'center',
        defaultSortOrder: 'descend',
        sorter: (a, b) => moment(a.saveTime)._d.getTime() - moment(b.saveTime)._d.getTime(),
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
    },
];
export default {
    name: 'TimerNotAchieve',

    data() {
        return {
            data: [],
            columns,
            selectedRowKeys: [],
            selectedRows: [],
        };
    },
    computed: {
        rowSelection() {
            const { selectedRowKeys } = this
            return {
                selectedRowKeys,
                onChange: this.onSelectChange,
                hideDefaultSelections: true,
                selections: [
                    {
                        key: 'delete',
                        text: '删除',
                        onSelect: () => {
                            this.deleteRows()
                        },
                    },
                ],
                onSelection: this.onSelection,
            };
        },
    },
    mounted() {
        this.getData()
    },

    methods: {
        // deleteRows() {
        //     const that = this
        //     this.$confirm({
        //         title: '提示',
        //         content: '确定要删除所选项 ?',
        //         onOk() {
        //             let { data } = that
        //             // 判断是正序倒序，若正序则deleteRowKeys值就是数据索引值（因为deleteRowKeys值只是此时展现的表格数据索引）
        //             let flag = data[that.selectedRowKeys[0]].key == that.selectedRows[0].key ? true : false
        //             if (flag) {
        //                 that.selectedRowKeys.reduce((c, p) => {
        //                     // p 是此时已删除个数
        //                     data.splice(c - p, 1)
        //                     p++
        //                 }, -1)
        //             } else {
        //                 that.selectedRowKeys.reduce((c, p) => {
        //                     data.splice(data.length - p - 1 - c, 1)
        //                     p++
        //                 }, 1)
        //             }
        //             that.data = data
        //             that.selectedRowKeys = []
        //             that.setLocalData()
        //         },
        //         onCancel() { 
        //             that.selectedRowKeys = []
        //         }
        //     })
        // },
        // onSelectChange(selectedRowKeys, selectedRows) {
        //     this.selectedRowKeys = selectedRowKeys;
        //     this.selectedRows = selectedRows
        // },
        moment,
        getData() {
            let allData = JSON.parse(localStorage.getItem('userHistoryData'))
            this.data = allData.filter(item => item.isAchieve == 'true')
        },
        // setLocalData() {
        //     let dataStr = JSON.stringify(this.data)
        //     localStorage.setItem('userHistoryData', dataStr)
        // },
        handleDelOne(text, record) {
            let allData = JSON.parse(localStorage.getItem('userHistoryData'))
            allData.map((item, index) => {
                if (item.id == record.id) {
                    allData.splice(index, 1)
                    let dataStr = JSON.stringify(allData)
                    localStorage.setItem('userHistoryData', dataStr)
                }
            })
            this.getData()
        },
    },
};
</script>

<style lang="less" scoped>
.delete-icon {
    color: #0f984f;
    cursor: pointer;

    &:hover {
        color: #58bf88;
    }
}
</style>